const gulp =require("gulp");
const connect =require("gulp-connect");
const sass =require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const babel = require("gulp-babel");
gulp.task("server",done=>{
    connect.server(
        {
            root:"dist",
            livereload:true 
        }
    );

    
    
    done();

});

gulp.task("html",done=>{
    gulp.src("src/*.html")
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
    done();
});
gulp.task("img", done => {
  gulp.src("src/img/**").pipe(gulp.dest("dist/img"));
  done();
});
gulp.task("babel", done => {
  gulp
    .src("src/js/*.js")
    .pipe(babel({ presets: ["@babel/env"] }))
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
  done();
});
gulp.task("libs", done => {
  gulp.src("src/libs/*.js").pipe(gulp.dest("dist/libs"));
  done();
});
gulp.task("sass",done=>{
    gulp.src("src/sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass( {outputStyle:"nested"}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
    done();
});
gulp.task("watch",done =>{
    gulp.watch("src/sass/*.scss",gulp.series("sass"));
    gulp.watch("src/*.html",gulp.series("html"));
   
    gulp.watch("src/js/*.js", gulp.series("babel"));
    gulp.watch("src/libs/*.js", gulp.series("libs"));
    gulp.watch("src/img/**", gulp.series("img"));
    done();
})
gulp.task("default",gulp.parallel("server","watch")); 